/* 
渲染页面前的准备工作
1，发送ajax
2，获取所有的数据，并储存进storage里
3，将数据转换成对象
4，调用渲染页面的函数
*/

function getStudentInsfo() {
    // 发送ajx
    Ajax({
        url: 'http://localhost/Dorm%20Management/server/studentQueryAll.php',
        success(msg) {
            // 将获取到的数据储存进storage
            sessionStorage.setItem('studentInfo', msg);
            // 将数组转换成字符串
            msg = JSON.parse(msg).slice(0, 8);

            // 调用渲染的函数,并把msg作为实参传进去
            randerPage(msg);
            // 储存当前为第一页
            sessionStorage.setItem("currentPage", 1)
        }
    })
};
getStudentInsfo()



/*
 渲染页面

*/
function randerPage(msg) {
    // 获取tbody，用于后续追加子元素
    let tbody2 = document.querySelector('#tbody2');
    tbody2.innerHTML = ''
    // 遍历这个对象
    msg.forEach((item, index) => {
        let str = `
              <tr>
                    <td>${item.sname}</td>
                    <td>${item.building}</td>
                    <td>${item.roomid}</td>
                     <td>${item.bedid}</td>
                     <td>${item.college}</td>
                     <td>${item.clazz}</td>
                     <td>${item.gender}</td>
                     <td>${item.studentnum}</td>
                     <td>${item.phone}</td>
                     <td>${item.telphone}</td>
                     <td>
                          <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#myModal" 
                                    style="padding:5px 15px;" id="${item.sid}" data-upd='upd'>修改</button>
                           <button type="button" class="btn btn-danger btn-sm" 
                                style="padding:5px 15px;" id="${item.sid}" data-del='del'>删除</button>
                     </td>
               </tr>
               `
        // 将str追加到tbody中
        tbody2.innerHTML += str;
    })
}


/* 
删除操作
*/
// 1，获取tbody，用时间的委托获取电击的是哪个按钮
let tbody2 = document.querySelector("#tbody2")
tbody2.onclick = function (e) {
    // 获取电机的按钮
    if (e.target.dataset.del == 'del') {
        let res = confirm('您确定要删除该宿舍人员的信息吗？')
        if (res) {
            // 发送ajax
            Ajax({
                url: 'http://localhost/Dorm%20Management/server/deleteStudent.php',
                data: { id: e.target.id },
                success() {
                    location.reload();
                }
            })
        }
    }
    // 修改
    /* 
    1, 先把页面渲染进信息里
     */
    if (e.target.dataset.upd == 'upd') {
        Ajax({
            url: 'http://localhost/Dorm%20Management/server/studentQueryOne.php',
            data: { id: e.target.id },
            success(msg) {
                msg = JSON.parse(msg)
                document.querySelector("#sid").value = msg.sid;
                // console.log(document.querySelector("#sid").value);
                // 渲染名字
                document.querySelector("#updsname").value = msg.sname;
                // 渲染宿舍楼
                document.querySelector('#updbuilding ').value = msg.building
                // 渲染房号
                document.querySelector('#updroomid').value = msg.roomid
                // 获取床号
                document.querySelector('#updbedid').value = msg.bedid
                // 渲染专业
                document.querySelector('#updatecollege').value = msg.college
                // 渲染班级
                document.querySelector('#updclazz').value = msg.clazz
                // 渲染性别
                let updategender = document.querySelectorAll('.updategender')
                // 判断点击的性别
                if (msg.gender == "男") {
                    updategender[0].checked = true;
                } else {
                    updategender[1].checked = true;
                }
                // 渲染学号
                document.querySelector('#updatestudentnum input').value = msg.studentnum
                // 渲染电话
                document.querySelector('#updatephone input').value = msg.phone
                // 渲染家庭电话
                document.querySelector('#updatetelphone input').value = msg.telphone
            }
        })
    }
}
/*
   确认修改信息
   // 点击确认按钮后，保存修改后的学生信息
   */
// 修改工作
// 获取表单信息
function updateStudent() {
    // 获取学生编号
    let sid = document.querySelector('#sid').value
    // 获取学生姓名
    let updsname = document.querySelector('#updsname').value
    // 获取学生宿舍楼
    let updbuilding = document.querySelector('#updbuilding')
    let updbuildingIndex = updbuilding.selectedIndex;
    let updbuildingText = updbuilding.options[updbuildingIndex].text
    // 获取学生房间号
    let updroomid = document.querySelector('#updroomid')
    let updroomidIndex = updroomid.selectedIndex;
    let updroomidText = updroomid.options[updroomidIndex].text
    // 获取学生床号
    let updbedid = document.querySelector('#updbedid')
    let updbedidIndex = updbedid.selectedIndex;
    let updbedidText = updbedid.options[updbedidIndex].text
    // 获取学生专业
    let updcollege = document.querySelector('#updcollege')
    let updcollegeIndex = updcollege.selectedIndex;
    let updcollegeText = updcollege.options[updcollegeIndex].text
    // 获取学生班级
    let updclazz = document.querySelector('#updclazz')
    let updclazzIndex = updclazz.selectedIndex;
    let updclazzText = updclazz.options[updclazzIndex].text
    // 获取学号
    let updstudentnum = document.querySelector('#updstudentnum').value
    // 获取手机号
    let updphone = document.querySelector('#updphone').value
    // 获取家庭电话
    let updtelphone = document.querySelector('#updtelphone').value
    // 获取性别
    let updategender = document.querySelectorAll('.updategender')
    let sex;
    // 修改性别
    for (let i = 0; i < updategender.length; i++) {
        if (updategender[i].checked) {
            sex = updategender[i].value
        }
    };
    // 校验，不能为空
    if (!(updsname)) {
        return alert('名字不能为空')
    };
    // 校验学号，为12位数字
    if (!(/^\d{12}$/).test(updstudentnum)) {
        return alert('学号应为12位纯数字')
    };
    if (!(/^\d{11}$/).test(updphone)) {
        return alert('手机号应为11位纯数字')
    };
    if (!(/^\d{11}$/).test(updtelphone)) {
        return alert('家庭电话应为11位纯数字')
    };
    // 发送请求
    Ajax({
        type: 'POST',
        url: 'http://localhost/Dorm%20Management/server/updateStudent.php',
        data: { sid, updsname, updbuildingText, updroomidText, updbedidText, updcollegeText, updclazzText, sex, updstudentnum, updphone, updtelphone },
        success() {
            location.reload()
        }
    })
    // console.log(sid, updsname, updbuildingText, updroomidText, updbedidText, updcollegeText, updclazzText, sex, updstudentnum, updphone, updtelphone);
    // console.log(updsname, updbuilding.value, updroomid.value, updbedid.value, updcollege.value, updclazz.value, sex, updstudentnum, updphone, updtelphone);
}

/* 
添加

*/

function addStudent() {
    // 获取学生姓名
    let addsname = document.querySelector('#addsname').value
    // 获取学生宿舍楼
    let addbuilding = document.querySelector('#addbuilding')
    let addbuildingIndex = addbuilding.selectedIndex;
    let addbuildingText = addbuilding.options[addbuildingIndex].text
    // 获取学生房间号
    let addroomid = document.querySelector('#addroomid')
    let addroomidIndex = addroomid.selectedIndex;
    let addroomidText = addroomid.options[addroomidIndex].text
    // 获取学生床号
    let addbedid = document.querySelector('#addbedid')
    let addbedidIndex = addbedid.selectedIndex;
    let addbedidText = addbedid.options[addbedidIndex].text
    // 获取学生专业
    let addcollege = document.querySelector('#addcollege')
    let addcollegeIndex = addcollege.selectedIndex;
    let addcollegeText = addcollege.options[addcollegeIndex].text
    // 获取学生班级
    let addclazz = document.querySelector('#addclazz')
    let addclazzIndex = addclazz.selectedIndex;
    let addclazzText = addclazz.options[addclazzIndex].text
    // 获取学号
    let addstudentnum = document.querySelector('#addstudentnum').value
    // 获取手机号
    let addphone = document.querySelector('#addphone').value
    // 获取家庭电话
    let addtelphone = document.querySelector('#addtelphone').value
    // 获取性别
    let addgender = document.querySelectorAll('.addgender')
    let sex;
    // 修改性别
    for (let i = 0; i < addgender.length; i++) {
        if (addgender[i].checked) {
            sex = addgender[i].value
        }
    };
    // 校验，不能为空
    if (!(addsname && addbuilding.value && addroomid.value && addbedid.value && addcollege.value && addclazz.value && addstudentnum && addphone && addtelphone)) {
        return alert('添加信息不能为空')
    };
    // 校验学号，为12位数字
    if (!(/^\d{12}$/).test(addstudentnum)) {
        return alert('学号应为12位纯数字')
    };
    if (!(/^\d{11}$/).test(addphone)) {
        return alert('手机号应为11位纯数字')
    };
    if (!(/^\d{11}$/).test(addtelphone)) {
        return alert('家庭电话应为11位纯数字')
    };


    // 发送请求
    Ajax({
        type: 'POST',
        url: 'http://localhost/Dorm%20Management/server/addStudent.php',
        data: { addsname, addbuildingText, addroomidText, addbedidText, addcollegeText, addclazzText, sex, addstudentnum, addphone, addtelphone },
        success() {
            location.reload()
            // console.log(addsname, addbuildingText, addroomidText, addbedidText, addcollegeText, addclazzText, sex, addstudentnum, addphone, addtelphone);

        }

    })


}

// 名字模糊查询
function queryLikeName() {
    // 先获取到文本框里面的值
    let likeName = document.querySelector('#likeName').value;
    // 区控判断
    if (likeName.trim().length == 0) {
        return alert("请输入名字")
    }
    // 发送ajax以获取数据
    Ajax({
        url: 'http://localhost/Dorm%20Management/server/queryLikeName.php',
        data: { likeName },
        success(msg) {
            console.log(msg);
            if (msg == '[]') {
                alert('查无此人')
                likeName.innerHTML = '';
            } else {
                // 将数据储存到storage里面
                sessionStorage.setItem('studentInfo', msg)
                // 将msg转换为对象
                let studentInfo = JSON.parse(msg).slice(0, 8)
                randerPage(studentInfo)
            }
        }
    })
}

/*
首页
    1，sessionStorage李面储存的currentPage = 1
    2，获取到第一页的数据，一页显示10条数据
    3，渲染页面
 */
function first() {
    // sessionStorage李面储存的currentPage = 1
    sessionStorage.setItem('currentPage', 1)
    // 从storage里面获取数据，渲染前10条
    let studentInfo = sessionStorage.getItem('studentInfo')
    // 将json字符串转换为对象
    studentInfo = JSON.parse(studentInfo).slice(0, 8)
    // 调用渲染页面的函数，渲染页面
    randerPage(studentInfo)
    console.log('你点击了首页按钮哦‘）                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     ');

}
/* 
尾页
  1，从storage里面获取学生数据
  2，将学生数据转换成对象
  3，设置当前页面
  4，将当前页面储存进storage里面
  5，计算最后一页的数据
  6，渲染页面
*/

function last() {
    // 1,从storage里面获取学生数据
    let studentInfo = sessionStorage.getItem('studentInfo')
    // 2，将学生数据转换成对象
    studentInfo = JSON.parse(studentInfo)
    // 3，设置当前页面,一页存10条
    let currentPage = Math.ceil(studentInfo.length / 8)
    // 4，将当前页面储存进storage里面
    sessionStorage.setItem('currentPage', currentPage)
    // 5，计算最后一页的数据
    if (studentInfo.length % 8 != 0) {
        studentInfo = studentInfo.slice(Math.floor(studentInfo.length / 8) * 8, studentInfo.length)
    } else {
        studentInfo = studentInfo.slice(Math.floor(studentInfo.length / 8 - 1) * 8, studentInfo.length)

    }
    // 6，渲染页面
    randerPage(studentInfo)
    console.log('你点击了尾页按钮哦‘）                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     ');

}

/* 
上一页
    1，先从storage里获取到当前页
    2，点击上一页时，当前页-1，如果当前页小于1，那么就等于1
    3，获取学生数据
    4，转为对象
    5，截取10条
    6，渲染页面
*/
function up() {
    // 1，先从storage里获取到当前页
    let currentPage = +sessionStorage.getItem('currentPage')
    // 2，点击上一页时，当前页-1，如果当前页小于1，那么就等于1
    currentPage = currentPage - 1
    if (currentPage < 1) {
        currentPage = 1
    }
    // 储存当前页
    sessionStorage.setItem('currentPage', currentPage)
    // 3，获取学生数据
    let studentInfo = sessionStorage.getItem('studentInfo')
    // 4，转为对象
    studentInfo = JSON.parse(studentInfo)
    // 5，截取10条
    studentInfo = studentInfo.slice((currentPage - 1) * 8, currentPage * 8)
    // 调用渲染页面的函数，渲染页面
    randerPage(studentInfo)
    console.log('你点击了下一页按钮哦‘）                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     ');

}
/* 
下一页
    1，先从storage里获取到当前页
    2，点击上一页时，当前页+1，如果当前页大于Math.ceil(studentInfo / 8)，那么就等于Math.ceil(studentInfo / 8)
    3，获取学生数据
    4，转为对象
    5，截取10条
    6，渲染页面
*/
function down() {
    // 3，获取学生数据
    let studentInfo = JSON.parse(sessionStorage.getItem('studentInfo'))
    // 1，先从storage里获取到当前页
    let currentPage = +sessionStorage.getItem('currentPage')
    // 2，点击上一页时，当前页-1，如果当前页小于1，那么就等于1
    currentPage = currentPage + 1
    if (currentPage > Math.ceil(studentInfo.length / 8)) {
        currentPage = Math.ceil(studentInfo.length / 8)
    }
    // 储存当前页
    sessionStorage.setItem('currentPage', currentPage)
    // 5，截取10条
    studentInfo = studentInfo.slice((currentPage - 1) * 8, currentPage * 8)
    // 调用渲染页面的函数，渲染页面
    randerPage(studentInfo)
    console.log('你点击了下一页按钮哦‘）                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     ');

}
